<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hoodie Account</title>
    <link rel="stylesheet" href="./client.css">
    <script src="/hoodie/client.js"></script>
  </head>
  <body>
    <h1>Account</h1>
    <div data-hide="false" class="generic-loader-wrap"></div>

    <section data-hide="true" class="input-forms">
      <h2>Sign In</h2><br>
      <label for="login-username-field">username</label><br>
      <input name="username-field" id="login-username-field" type="text"><br>
      <label for="login-password-field">password</label><br>
      <input name="password-field" id="login-password-field" type="password"><br>
      <span class="messages" id="login-response"></span><br>
      <button id="login" class="hoodie-button">SIGN IN</button>
    </section>
    <section data-hide="true" class="input-forms">
      <h2>Sign Up</h2><br>
      <label for="register-username-field">username</label><br>
      <input name="username-field" id="register-username-field" type="text"><br>
      <label for="register-password-field">password</label><br>
      <input name="password-field" id="register-password-field" type="password"><br>
      <span class="messages" id="register-response"></span><br>
      <button id="register" class="hoodie-button">SIGN UP</button>
    </section>
    <section data-hide="true" class="input-forms">
      <h2>Reset Password</h2><br>
      <label for="reset-email-field">email</label><br>
      <input name="email-field" id="reset-email-field" type="text"><br>
      <span class="messages" id="password-reset-response"></span><br>
      <button id="reset" class="hoodie-button">REQUEST</button>
    </section>

    <section data-hide="true" class="profile-forms">
      <h2>Account Credentials</h2><br>
      <label for="update-username-field">username</label><br>
      <input name="username-field" id="update-username-field" type="text"><br>
      <label for="update-password-field">password</label><br>
      <input name="password-field" id="update-password-field" type="text">
      <div class="password-tooltip">If you leave it blank, we won't modify the password</div><br>
      <span class="messages" id="update-response"></span><br>
      <button id="update" class="hoodie-button">Update Account</button>
    </section>
    <section data-hide="true" class="profile-forms">
      <h2>Sign Out</h2><br>
      <button id="logout" class="hoodie-button">Confirm</button>
    </section>
    <section data-hide="true" class="profile-forms">
      <h2>Destroy Account</h2><br>
      <button id="destroy" class="hoodie-button">Confirm</button>
    </section>

    <script src="./client.js"></script>
  </body>
</html>
